<template>
    <div class="header-nav">
      <HeaderNav />
    </div>
    <div class="main-content">
      <div class="sidebar-menu">
        <SidebarMenu />
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </template>
  
  <script setup>
  import HeaderNav from "@/components/HeaderNav.vue";
  import SidebarMenu from "@/components/SidebarMenu.vue";
  </script>
  
  <style lang="scss" scoped>
  .header-nav {
    height: 60px;
  }
  .main-content {
    display: flex;
    height: calc(100vh - 60px);
    .sidebar-menu {
      width: 200px;
      height: 100%;
    }
    .content { 
      height: 100%;
      width: calc(100vw - 200px);
      background: #f4f4f4;
      padding: 20px;
    }
  }
  </style>